import "./App.css";
import { Canvas } from "@react-three/fiber";
import { PerspectiveCamera } from "@react-three/drei";
import { Sora } from "./sora";
import { Suspense, useRef } from "react";
import Rocket from "./rocket";
import Director from "./director";
import TouchLayer from "rc-touchlayer";
import { EventDispatcher } from "three";
import Earth from "./earth";
import Effects from "./effect";
function App() {
  const bus = useRef(new EventDispatcher());
  const data = useRef({
    camera: [0, 2.5, 0],
    rocket: [0, 0, 0],
    start: false,
  });
  const refCamera = useRef<any>();
  const refRocket = useRef<any>();

  return (
    <TouchLayer
      onClick={() => {
        if (!data.current.start) {
          bus.current.dispatchEvent({ type: "start" });
        }
      }}
    >
      <div className="App">
        <Suspense fallback={null}>
          <Canvas dpr={[1,1.5]}>
            <Director
              data={data}
              camera={refCamera}
              rocket={refRocket}
              bus={bus}
            />
            <color attach="background" args={[0x020209]}></color>
            <PerspectiveCamera
              ref={refCamera}
              far={2000000}
              near={0.1}
              position={data.current.camera as any}
              makeDefault
            >
              <pointLight
                decay={2}
                distance={1000}
                intensity={0.125}
                castShadow
              ></pointLight>
            </PerspectiveCamera>
            <fog args={["#070710", 100, 2000000]}></fog>

            <Sora data={data} />
            <Rocket
              refTarget={refRocket}
              position={data.current.rocket}
              rotation={[0, Math.PI * 0.25, 0]}
              bus={bus}
              data={data}
            />
            <Earth />
            <Effects />
          </Canvas>
        </Suspense>
      </div>
    </TouchLayer>
  );
}

export default App;
